<template>
  <div>
    <!--ant 主题皮肤样式-->
    <a-config-provider
        :theme="{
          token: {
            colorPrimary: '#81d8cf',
          },
        }">
      <router-view></router-view>
      <a-back-top />
    </a-config-provider>
  </div>

</template>

<script setup>
import {watch, h, onMounted, onBeforeUnmount} from "vue";
import { notification } from 'ant-design-vue';
import {useSocketStore} from "@/utils/websocket.js";
import {getSession} from "@/api/LoginRequest.js";
import {SmileOutlined} from "../.vite/deps/@ant-design_icons-vue.js";
import Pubsub from "pubsub-js";

const wsStore = useSocketStore();

// 监听websocket消息
watch(() => wsStore.msg, (msg) => {
  if(msg.type === 0) {
    // 评论型消息
    notification.open({
      message: '评论消息',
      icon: () => h(SmileOutlined, { style: 'color: #108ee9' }),
      description: msg.msgContent,
      style: {
        marginLeft: `${335 - 600}px`,
      },
      class: 'notification-custom-class',
    });
  }

  if(msg.type === 2) {
    // 私聊消息
    notification.open({
      message: '私聊消息',
      icon: () => h(SmileOutlined, { style: 'color: #108ee9' }),
      description: msg.msgContent,
      style: {
        marginLeft: `${335 - 600}px`,
      },
      class: 'notification-custom-class',
    });
  }
});

// websocket重连
if(typeof wsStore.ws === 'undefined') {
  getSession().then(res => {
    if(res.code === 0) {
      const token = res.data.tokenSignList[0].value;
      localStorage.setItem('token', token);
      wsStore.connection(token, res.data.dataMap.userSession.userId);
    }
  })
}

// 滚动条监听
const handleScroll = async () => {
  const scrollPosition = Math.floor(document.documentElement.scrollTop);
  const windowHeight = window.innerHeight;
  const scrollHeight = document.documentElement.scrollHeight;
  if (scrollPosition + windowHeight >= scrollHeight - 50) {
      Pubsub.publish('scroll', {
        msg: '滚动到底了'
      });
  }
};

onMounted(() => {
  window.addEventListener('scroll', handleScroll);
});

onBeforeUnmount(() => {
  window.removeEventListener('scroll', handleScroll);
});

</script>

<style scoped>

</style>
